<template>
  <wanglei-tree :data="list" :load="load">
    <template #icon="node">
      <wanglei-icon name="circle-open" v-if="!node.loading && node.hasChildren && node.expanded"></wanglei-icon>
      <wanglei-icon name="circle-close" v-if="!node.loading && node.hasChildren && !node.expanded"></wanglei-icon>
      <wanglei-icon name="circle-loading" v-if="node.loading"></wanglei-icon>
    </template>
    <template #label="node">
      <b style="color: #f60">{{ node.name }}</b>
    </template>
  </wanglei-tree>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'

function recursion(path = '0') {
  const list = [];
  for (let i = 0; i < 2; i += 1) {
    const nodeKey = `${path}-${i}`;
    const treeNode = {
      nodeKey,
      name: nodeKey,
      hasChildren: true
    };
    list.push(treeNode);
  }
  return list;
}

export default defineComponent({
  setup() {
    const list = ref([])
    onMounted(() => {
      list.value = recursion()
    })

    const load = (node: any, callback: any) => {
      const result: any = []
      for (let i = 0; i < 2; i++) {
        const nodeKey = `${node.nodeKey}-${i}`
        const treeNode = {
          nodeKey,
          name: nodeKey,
          children: [],
          hasChildren: true
        }
        result.push(treeNode)
      }
      setTimeout(() => {
        callback(result)
      }, 1000)
    }

    return {
      list,
      load
    }
  }
})
</script>

<style scoped>

</style>
